<template>
    <div>
      <!--导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/user/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>人员管理</el-breadcrumb-item>
        <el-breadcrumb-item>人员分组</el-breadcrumb-item>
      </el-breadcrumb>

      <!--卡片视图区-->
      <el-card >
        <el-row>
          <el-col :span="7">
            <template>
              <el-select v-model="searchGroupName" filterable clearable placeholder="可选择组名筛选" @change="reSetPage()"
                         @clear="reSetPage()">
                <el-option
                  v-for="item in groupList"
                  :key="item.groupId"
                  :label="item.groupName"
                  :value="item.groupName">
                </el-option>
              </el-select>
            </template>
          </el-col>
        </el-row>

        <!--表格-->
        <el-table :data="groupInfo" border stripe>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="组编号">
            <template slot-scope="scope">
              <span style="color: brown" size="medium"><i class="el-icon-s-opportunity"></i>{{ scope.row.groupId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="组名">
            <template slot-scope="scope">
              <span style="color: #67C23A" size="medium"><i class="el-icon-s-home"></i>{{scope.row.groupName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已加入人数">
            <template slot-scope="scope">
              <span style="color: black" size="medium"><i class="el-icon-user"></i>{{scope.row.memberCount}} </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="addGroupToUser(scope.row.groupName)">
                加入该组
              </el-button>

            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[8,9, 10, 11, 12]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </el-card>
    </div>
</template>

<script>
    export default {
        name: "GiveUserToGroup",
        data(){
          return{
            pageNum: 1,
            pageSize: 8,
            groupInfo: [],   //各组的信息
            groupList: [],    //组列表
            searchGroupName: '',
            total: 0
          }
        },
      created() {
        this.getGroupList();
        this.getGroupInfo();
      },
      methods:{
        async getGroupList(){
          //发起get请求
          const {data: res} = await this.$http.get('teamGroup/getGroups');
          if (res.status != 200){
            return this.$message.error(res.msg);
          }
          //获取后端组数据
          //console.log(res);
          this.groupList = res.data;
        },
        reSetPage(){
          this.pageNum = 1;
          this.pageSize = 6;
          this.getGroupInfo();
        },
        //获取组的信息
        async getGroupInfo(){
          const {data: res} = await this.$http.get('teamGroup/getGroupInformation',{
             params: {
               pageNum: this.pageNum,
               pageSize: this.pageSize,
               groupName: this.searchGroupName
             }
          });
          //console.log(res);
          if (res.status != 200){
            return this.$message.error("获取数据失败");
          }
          this.groupInfo = res.data.groupInformationVos;
          this.total = res.data.total;

        },
        handleSizeChange(newPageSize){
          //更新没页的条数
          this.pageSize = newPageSize;
          this.getGroupInfo();
        },
        handleCurrentChange(newPage){
          //更新页码
          this.pageNum = newPage;
          this.getGroupInfo();
        },
        //加入分组
        async addGroupToUser(groupName){
          var userInformation = JSON.parse(window.sessionStorage.getItem("user"));
          //发送Put请求
          const {data: res} = await this.$http.put(`user/addGroupToUser/${userInformation.userName}/${groupName}`);
          if (res.status != 200){
            return this.$message.error(res.msg);
          }
          return this.$message.success("加入成功");

        }

      }
    }
</script>

<style scoped>

</style>
